<template>
  <div class="header-left expanded" :class="{ 'expanded': isMenuExpanded }">
    <div class="menu-items-wrapper">
      <el-button
        v-for="item in routeList"
        :class="{'active-btn': currentRoute === item.path}"
        :key="item.path"
        type="primary"
        @click="jumpTo('/' + item.path, item.isExternal)"
      >
        {{ item.name }}
      </el-button>
    </div>

  </div>
</template>

<script>
// @ is an alias to /src

import Vue from 'vue'
import api from "@/api/common.api";
const defaultMenuWidth = '90px'
export default {
  name: 'Home',
  computed: {
    currentRoute() {
      return this.$route.name
    }
  },
  data () {
      return {
        isMenuExpanded: false,
        menuWidth: defaultMenuWidth, // 默认收缩状态的宽度
        routeList: [
          {
            path: 'index',
            name: '首页'
          },
          {
            path: 'dataManage',
            name: '预警管理'
          },
          {
            path: 'caseManage',
            name: '案情管理'
          },
          // {
          //   path: 'indexManage',
          //   name: '首页管理'
          // },
          {
            path: 'vipManage',
            name: '重点人员管理'
          },
          // {
          //   path: 'publicizeManage',
          //   name: '宣贯管理'
          // },
          {
            path: 'activeInterception',
            name: '主动拦截',
            isExternal: true,
          },
          {
            path: 'riskSourceStationAnalysis',
            name: '风险源站分析',
            isExternal: true,
          },
          {
            path: 'aiPage/aiDiscouragement',
            name: 'AI反诈劝阻民警',
            isExternal: true,
          },
          {
            path: 'daPing',
            name: '大屏',
            isExternal: true,
          },
          {
            path: 'victimManage',
            name: '被害人分析'
          },
          {
            path: 'precisePreventManage',
            name: '精准防范处置'
          },
        ],
        changeFlag: true,
        pwComfirm: false,
        statementShow: false,
        markerList: [],
        dialogTableHead: [
              {
                  prop: 'alarmTime',
                  label: '日期',
                  width: 160
              },
          ],
        dialogfieldsList: [
            {
                type: 'text',
                code: 'oldPass',
                name: '原密码',
                password: true,
                placeholder: '请输入原密码',
            },
            {
                type: 'text',
                code: 'newPass',
                name: '新密码',
                password: true,
                placeholder: '请输入新密码',
            },
            {
                type: 'text',
                code: 'comfirmPW',
                name: '确认密码',
                password: true,
                placeholder: '请确认新密码',
            },
        ],
        isHovering: false,
        menuTimeout: null,
      }
  },
  methods: {
      toggleMenu() {
        this.isMenuExpanded = !this.isMenuExpanded
        // 清除之前的定时器
        if (this.menuTimeout) {
          clearTimeout(this.menuTimeout)
          this.menuTimeout = null
        }
      },

      jumpTo(url, isExternal) {
        if (isExternal) {
          // 新开标签页
          const path = this.$router.resolve({path: url});
          window.open(path.href, '_blank')
        }else{
          // 原地跳转
          this.$router.push({path: url})
        }
      },
      changePW () {
          this.$refs.modifyPW_dialog.open({title: '修改密码', width: '40%'})
      },
      logout () {
          this.$store.commit('logOut')
          this.$router.push({name: 'login'})
      },
      getJyzToMap () {
        api.getJyzToMap().then(res=>{
          res.content.forEach(v=>{
            this.addGasStationPoint(v)
          })
        })

      },
      drawPoint (list) {
        this.markerList.forEach(v=>{
          this.removePoint(v)
        })
        list.forEach(v=>{
          this.addPoint(v)
        })
        this.$refs.Lmap.setView([list[list.length - 1].wd,list[list.length - 1].jd], 16)
      },
      removePoint (point) {
          this.$refs.Lmap.removeLayer(point)
      },
      createDom (div) {
        var Profile = Vue.extend({
          template: div,
          data: function () {
            return {
              firstName: 'Walter',
              lastName: 'White',
              alias: 'Heisenberg'
            }
          },
          methods:{
            aaa(){

            }
          }
        })
        let dom = new Profile().$mount()
        return dom
      },
      addGasStationPoint (e) {
        if(!e){
          return false
        }
        let div = `<div class="capture-pop-wrap">
                          <div class="capture-pop-title">加油站</div>
                          <div class="capture-pop-item"><span>管理单位：</span>${e.GLDW}</div>
                          <div class="capture-pop-item"><span>场所名称：</span>${e.CSMC}</div>
                        </div>`
        // 创建 Profile 实例，并挂载到一个元素上。
        let dom = this.createDom(div)
        let point = {
          latlng: {lat: e.WD, lng: e.JD},
          dom: dom.$el
        }
        let icon = require('/src/assets/img/mapImg/gas_station.png')
        this.$refs.Lmap.addMarker(point, icon)
      },
      addPoint (e) {
        if(!e){
          return false
        }
        this.markerList.forEach(v=>{
          this.removePoint(v)
        })
        let div = `<div class="capture-pop-wrap">
                          <div class="capture-pop-title">抓拍信息</div>
                          <div class="capture-pop-item"><span>抓拍时间：</span>${e.passTime}</div>
                          <div class="capture-pop-item"><span>加油站：</span>${e.sbmc}</div>
                          <div class="capture-pop-item"><span>车牌号：</span>${e.plateNo}</div>
                          <div class="capture-pop-item"><span>抓拍照片：</span><img class="captrue-car-img" src="${e.sceneImg}" alt=""></div>
                        </div>`
        // 创建 Profile 实例，并挂载到一个元素上。
        let dom = this.createDom(div)
        let point = {
            latlng: {lat: e.wd, lng: e.jd},
            dom: dom.$el,
            zIndexOffset: 999
        }
        this.markerList.push(this.$refs.Lmap.addMarker(point))
      }
  },
  mounted () {
    // this.getJyzToMap()
    // {lat: 31.096331315335608, lng: 121.2143898010254}
  }
}
</script>

<style lang="stylus">
.header-left {
  pointer-events: auto;
  // background: rgba(20, 97, 167, 0.7);
  padding: 0 5px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  .menu-toggle-button {
    background: transparent;
    border: none;
    color: white;
    font-size: 16px;
    padding: 5px 10px;
    margin-right: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    &:hover {
      color: #2196f3;
    }
  }
  .menu-items-wrapper {
    display: flex;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); // 弹性动画

    .el-button {
      background: #1461a7;
      border-radius: 0;
      border: none;
      transition: all 0.3s ease;
      opacity: 0.8;
      white-space: nowrap;
      margin-left: 5px !important;
      transform: scale(1);

      &:hover {
        opacity: 1;
        transform: scale(1.05);
      }
    }
  }
  // 收缩状态
  &:not(.expanded) {
    .menu-items-wrapper {
      width: 0;
      opacity: 0;
      transform: translateX(-10px);
    }
  }

  // 展开状态
  &.expanded {
    .menu-items-wrapper {
      width: auto;
      opacity: 1;
      transform: translateX(0);
    }
  }
  .el-button {
    background: #1461a7;
    border-radius: 0;
    border: none;
    transition: all 0.3s ease;
    opacity: 0.8;
    display: inline-block;
    margin-left: 5px !important;

    &:hover {
      opacity: 1;
    }
  }
  .active-btn{
    background: #022f55;
    color: #2196f3;
  }
}
</style>
